<template>
<view class="login-container">
  
  <view class="login-form">
    <uni-forms ref="form" :modelValue="formData">
      <uni-forms-item name="username">
        <uni-easyinput 
          prefixIcon="person"
          v-model="formData.username" 
          placeholder="请输入账号"
        />
      </uni-forms-item>
      
      <uni-forms-item name="password">
        <uni-easyinput 
          prefixIcon="locked"
          type="password"
          v-model="formData.password" 
          placeholder="请输入密码"
        />
      </uni-forms-item>
    </uni-forms>

    <button class="login-btn" @click="handleLogin">立即登录</button>
  </view>
</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
//import { useAuthStore } from '@/store/authStore'

export default defineComponent({
  setup() {
    //const authStore = useAuthStore()
    const activeRole = ref<'tenant' | 'landlord'>('tenant')
    const formData = reactive({
      username: '',
      password: ''
    })

    const formRules = reactive({
      username: {
        rules: [
          { required: true, errorMessage: '请输入手机号' },
          {
            validateFunction: (rule: any, value: string) => {
              return /^1[3-9]\d{9}$/.test(value)
            },
            errorMessage: '请输入正确的手机号格式'
          }
        ]
      },
      password: {
        rules: [
          { required: true, errorMessage: '请输入密码' },
          {
            validateFunction: (rule: any, value: string) => {
              return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{6,20}$/.test(value)
            },
            errorMessage: '需包含字母、数字和特殊字符（6-20位）'
          }
        ]
      }
    })

    // 在setup函数中添加
    //const { form } = useAuthStore()
    const handleLogin = async () => {
      try {
        // // 这里实际应调用登录接口
        // await authStore.login({
        //   role: activeRole.value,
        //   username: formData.username,
        //   token: 'mock_token'
        // })
        
        uni.switchTab({
          url: activeRole.value === 'tenant' 
            ? '/pages/tenant/mine/index' 
            : '/pages/landlord/mine/index'
        })
      } catch (err) {
        uni.showToast({ title: '登录失败', icon: 'none' })
      }
    }

    return {
      formData,
      formRules,
      activeRole,
      handleLogin
    }
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  padding: 40rpx;
  min-height: 100vh;
  background: #f5f5f5;

  .role-selector {
    display: flex;
    justify-content: center;
    gap: 40rpx;
    margin-bottom: 60rpx;

    .role-card {
      width: 300rpx;
      padding: 40rpx;
      background: #fff;
      border-radius: 20rpx;
      text-align: center;
      transition: all 0.3s;

      &.active {
        box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
        transform: translateY(-10rpx);
      }

      .role-icon {
        width: 120rpx;
        height: 120rpx;
        margin-bottom: 20rpx;
      }

      .role-title {
        font-size: 30rpx;
        color: #333;
      }
    }
  }

  .login-form {
    background: #fff;
    padding: 40rpx;
    border-radius: 20rpx;

    .login-btn {
      margin-top: 60rpx;
      background: #2979ff;
      color: #fff;
      border-radius: 50rpx;
    }
  }
}
</style>